<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>体检报告</p>
            <div></div>
        </header>
        <nav>
            <!-- 选项卡，默认情况下显示总检结论 -->
            <div :class="{ 'active': activeTab === 'result' }" @click="changeView('result')">总检结论</div>
            <div :class="{ 'active': activeTab === 'detail' }" @click="changeView('detail')">报告详情</div>
        </nav>
        <div class="top-ban"></div>


        <!-- 总检结论 -->
        <div class="nav-content-item" v-if="showResult">
            <div class="item">
                <div class="title">异常项</div>
                <el-collapse>
                    <el-collapse-item :title="ci.ciName" v-for="ci in ciReportArr" :key="ci.ciId">
                        <el-row style="color: #888">
                            <el-col :span="12" style="box-sizing: border-box; padding: 6px 10px;display: flex;"
                                v-for="cidr in ci.ciDetailedReportList" :key="cidr.ciId">
                                <span
                                    style="background-color: #ba634e; color: #fff; box-sizing: border-box; padding: 1px 3px; border-radius: 3px; margin-right: 5px;"
                                    v-if="cidr.isError == 1">异</span>

                                <span style="margin-right: 5px; vertical-align: top" v-if="cidr.isError == 1">
                                    {{ cidr.name }}
                                </span>
                                <span v-if="cidr.isError == 1">:{{ cidr.value }}</span>
                                <span style="margin-right: 15px" v-if="cidr.isError == 1">{{ cidr.unit }}</span>

                                <span v-if="cidr.normalValueString && cidr.isError == 1">正常值范围: {{
                                    cidr.normalValueString
                                    }}</span>
                            </el-col>
                        </el-row>


                    </el-collapse-item>
                </el-collapse>
            </div>


            <ul class="item">
                <div class="title">一、尊敬的顾客，您本次体检结论如下：</div>
                <div class="item" v-for="item in overallResultArr" :key="item.orId">

                    <p>{{ item.code }}.{{ item.title }}</p>
                </div>
            </ul>

            <ul class="item">
                <div class="title">二、尊敬的顾客，您本次体检建议信息日下：</div>
                <div class="item" v-for="item in overallResultArr" :key="item.orId">

                    <p>{{ item.code }}.{{ item.title }}</p>
                    <p>{{ item.content }}</p>
                </div>
            </ul>


        </div>

        <!-- 报告详情-->
        <div class="nav-content-item" v-if="showDetail">


            <el-collapse class="item">
                <el-collapse-item v-for="ci in ciReportArr" :key="ci.ciId">
                    <div class="title">{{ ci.ciName }}</div>
                    <div class="item">
                        <el-row style="color: #888">
                            <el-col :span="12" v-for="cidr in ci.ciDetailedReportList" :key="cidr.ciId"
                                style="display: flex;">
                                <span
                                    style="background-color: #ba634e; color: #fff; box-sizing: border-box; padding: 1px 3px; border-radius: 3px; margin-right: 5px;"
                                    v-if="cidr.isError == 1">异</span>

                                <span>
                                    {{ cidr.name }}
                                </span>
                                <span>:{{ cidr.value }}</span>
                                <span>{{ cidr.unit }}</span>

                                <span v-if="cidr.normalValueString">正常值范围: {{ cidr.normalValueString }}</span>
                            </el-col>
                        </el-row>

                    </div>
                </el-collapse-item>
            </el-collapse>

        </div>

        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from "@/components/footer.vue";
import { useRouter, useRoute } from "vue-router";
import { reactive, toRefs } from "vue";
import axios from "axios";

export default {
    setup() {
        const route = useRoute();
        const state = reactive({
            orderId: route.query.orderId,
            ciReportArr: [],
            overallResultArr: [],
            showResult: true, // 默认显示总检结论
            showDetail: false, // 默认隐藏报告详情
            activeTab: 'result', // 默认激活总检结论
        });

        const changeView = (tab) => {
            if (tab === 'result') {
                state.showResult = true;
                state.showDetail = false;
                state.activeTab = 'result';
            } else if (tab === 'detail') {
                state.showResult = false;
                state.showDetail = true;
                state.activeTab = 'detail';
            }
        };

        listCiReport();
        listOverallResultByOrderId();

        // 体检报告项目数据
        function listCiReport() {
            //前端返回后端订单号orderId，后端返回的对象内容包含（cireport表的ciId、ciName  嵌套另一个对象，这个对象是查cidetailedreport表当中的字段，对象名称为ciDetailedReportList（ciId、isError、name、value、unit、normalValueString））

            //即后端返回给前端的的对象内容为{ciId，ciName，ciDetailedReportList{ciId、isError、name、value、unit、normalValueString}}

            axios.post('/api/report/listCheckItem', { orderId: state.orderId })
                .then((response) => {
                    console.log("listCiReport方法返回的数据是:");
                    console.log(response.data);
                    // 如果请求成功，但是里面有一些没数据的话你去数据库里面通过相应的orderId去查一下，可能是因为你数据库里面的某些字段没有数据导致的，或者数据有问题，要手动添加一些数据进去数据库
                    state.ciReportArr = response.data.data;
                })
                .catch((error) => {
                    console.error(error);
                });
        }

        //这个方法是打印总检结论的内容
        function listOverallResultByOrderId() {
            //前端返回后端订单号orderId，后端返回的对象内容包含overallresult表当中的orId、code、title、content字段
            //即后端返回给前端的的对象内容为{orId，code，title，content}
            axios.post('/api/overallResult/listOverallResult', { orderId: state.orderId })
                .then((response) => {
                    console.log("listOverallResultByOrderId方法返回的数据是:");
                    log(response.data);
                    state.overallResultArr = response.data.data;
                    // 根据返回对象数据的条数，给code属性赋值，从1开始
                    for (let i = 0; i < state.overallResultArr.length; i++) {
                        state.overallResultArr[i].code = i + 1;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        }

        return {
            ...toRefs(state),
            changeView,
            listCiReport,
            listOverallResultByOrderId
        };
    },
    methods: {
        // 切换选项卡内容
        changeView(tab) {
            if (tab === 'result') {
                this.showResult = !this.showResult;
                this.showDetail = false;
                this.activeTab = 'result';
            } else if (tab === 'detail') {
                this.showResult = false;
                this.showDetail = !this.showDetail;
                this.activeTab = 'detail';
            }
        }
    },
    components: {
        Footer
    }
}
</script>


<style>
/* 定义CSS变量 */
:root {
    --main-bg-color: #F9F9F9;
    --header-bg-color: #FFF;
    --text-color: #333;
    --error-color: #ba634e;
    --border-color: #EEE;
    --active-color: #137E92;
}

/* 总容器样式 */
.wrapper {
    width: 100%;
    min-height: 100%;
    background-color: var(--main-bg-color);
    font-family: 'Arial', sans-serif;
    /* 统一字体 */
}

/* header样式 */
header {
    width: 100%;
    height: 15.7vw;
    background-color: var(--header-bg-color);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3.6vw;
    box-sizing: border-box;
    font-size: 4vw;
    /* 调整字体大小 */
    color: var(--text-color);
}

/* footer样式 */
footer {
    width: 100%;
    height: 14.2vw;
    box-sizing: border-box;
    border-top: solid 1px #E9E9E9;
    background-color: var(--header-bg-color);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 3vw;
    color: #999;
}

/* common样式 */
.top-ban,
.bottom-ban {
    width: 100%;
    height: 31.7vw;
    background-color: var(--main-bg-color);
}

/* nav样式 */
nav {
    width: 100%;
    height: 16vw;
    display: flex;
    background-color: var(--main-bg-color);
    position: fixed;
    left: 0;
    top: 15.7vw;
}

nav div {
    flex: 1;
    height: 14vw;
    text-align: center;
    line-height: 14vw;
    font-size: 4.2vw;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    /* 添加鼠标手型样式 */
    transition: color 0.3s;
    /* 添加颜色变化动画 */
}

nav div.active {
    color: var(--active-color);
    border-bottom: solid 2px var(--active-color);
}

/* nav-content-item样式 */
.nav-content-item .item {
    width: 92vw;
    margin: 20px auto;
    /* 统一边距 */
    background-color: var(--header-bg-color);
    border-radius: 10px;
    /* 圆角边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
}

.nav-content-item .item .title {
    background-color: #7BAFD7;
    color: #FFF;
    padding: 10px 40px;
    font-size: 16px;
    /* 调整字体大小 */
    text-transform: uppercase;
    /* 大小写转换 */
}

.nav-content-item .item ul {
    list-style-type: none;
    /* 移除列表点 */
    padding: 0;
    margin: 0;
}

.nav-content-item .item ul li {
    padding: 10px 20px;
    border-bottom: solid 1px var(--border-color);
    color: var(--text-color);
}

.nav-content-item .item ul li:last-child {
    border-bottom: none;
}

/* 异常项样式 */
.indications {
    display: flex;
    align-items: center;
}

.indications .error {
    background-color: var(--error-color);
    color: #FFF;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 10px;
}

.indications .name {
    font-weight: 600;
    margin-right: 10px;
}

.indications .unit {
    margin-right: 10px;
}

.indications .normal-value {
    font-size: 14px;
    color: #999;
}

/* 表格样式 */
.el-table {

    th,
    td {
        text-align: left;
        padding: 10px;
    }

    th {
        background-color: #f5f5f5;
    }

    td {
        border-bottom: 1px solid #eee;
    }
}

/* 异常状态样式 */
span.abnormal {
    background-color: #ba634e;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    white-space: nowrap;
}
</style>